<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>

            <i-col span="3" >
               <Button  size="default"  @click="btn_add_pressure_setting">新增压力测试</Button>
            </i-col>
        </Row>
        <!-- 列表区域 -->
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="primary"  style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_pressure_setting(index)">编辑</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 新增压力测试模态框 -->
        <Modal v-model="show_add_modal" width="800" draggable> 
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加压力测试</span>
            </p>
            <div >
                <Form ref="pressure_setting" :model="pressure_setting" :rules="pressure_setting_rules" label-position="left"  :label-width="120">
                    <Form-Item label="名字:"  prop="name">
                        <Input type="text"  v-model="pressure_setting.name" />
                    </Form-Item> 
                    <Form-Item label="压测类型" prop="ptype">
                        <Select v-model="pressure_setting.ptype">
                            <Option v-for="ptype in ptype_list" :key="ptype" :value="ptype">{{ ptype }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="服务器描述:"  prop="target_detail">
                        <Input type="textarea"  :autosize="{minRows: 5,maxRows: 20}" style="overflow: auto" v-model="pressure_setting.target_detail" />
                    </Form-Item> 
                    <Form-Item label="压测工具:"  prop="tools">
                        <Input type="text"  v-model="pressure_setting.tools" />
                    </Form-Item>  
                    <Form-Item label="压测工具描述:"  prop="tools_detail">
                        <Input type="textarea"  :autosize="{minRows: 6,maxRows: 10}" style="overflow: auto"  v-model="pressure_setting.tools_detail" />
                    </Form-Item> 
                    <Form-Item label="额外信息:"  prop="other">
                        <Input type="textarea"  :autosize="{minRows: 3,maxRows: 5}" style="overflow: auto"  v-model="pressure_setting.other" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button  size="default"  type="primary"   @click="submit_add_pressure_setting('pressure_setting')">提交</Button>
            </div>
        </Modal>
        <!-- 编辑压力测试模态框 -->
        <Modal v-model="show_edit_modal" width="800" draggable>
            <p slot="header" style="color:#f60;text-align:center">
               <span>编辑压力测试配置</span>
            </p>
            <div >
                <Form ref="pressure_setting_edit" :model="pressure_setting_edit" :rules="pressure_setting_rules" label-position="left"  :label-width="100">
                    <Form-Item label="名字:"  prop="name">
                        <Input type="text"  v-model="pressure_setting_edit.name" />
                    </Form-Item> 
                    <Form-Item label="压测类型" prop="ptype">
                        <Select v-model="pressure_setting_edit.ptype">
                            <template v-for="ptype in ptype_list" >
                                <Option  :key="ptype" :value="ptype" v-if="ptype === pressure_setting_edit.ptype"  selected>{{ ptype }}</Option>
                                <Option :key="ptype" :value="ptype" v-else>{{ ptype }} </Option>
                            </template>
                         </Select>
                    </Form-Item> 
                    <Form-Item label="服务器描述:"  prop="target_detail">
                        <Input type="textarea"  :autosize="{minRows: 5,maxRows: 20}"  style="overflow: auto" v-model="pressure_setting_edit.target_detail" />
                    </Form-Item> 
                    <Form-Item label="压测工具:"  prop="tools">
                        <Input type="text"  v-model="pressure_setting_edit.tools" />
                    </Form-Item>  
                    <Form-Item label="压测工具描述:"  prop="tools_detail">
                        <Input type="textarea"  :autosize="{minRows: 6,maxRows: 10}" style="overflow: auto"  v-model="pressure_setting_edit.tools_detail" />
                    </Form-Item> 
                    <Form-Item label="额外信息:"  prop="other">
                        <Input type="textarea"  :autosize="{minRows: 3,maxRows: 5}" style="overflow: auto"  v-model="pressure_setting_edit.other" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <!-- pressure_setting是 ref的值 -->
                <Button  size="default"  type="primary"   @click="submit_edit_pressure_setting('pressure_setting_edit')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { post } from '@/api/http'
import {
    pressure_setting_add,
    pressure_setting_list,
    pressure_setting_update,
} from '@/api';
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '压测ID',key: 'id',
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: 'blue'
                                },
                                on: {
                                    click: ()=>{                  
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.id)
                        ])
                    }
                },
                {
                    title: '名字',key: 'name',

                },
                {
                    title: '压测类型',key: 'ptype'
                },
                {
                    title: '服务器描述',key: 'target_detail',width: 400,
                    // render: (h, params) => {
                    //     return h('div', [
                    //         h('pre', JSON.stringify(params.row.target_detail,undefined,4))
                    //     ]);
                    // }
                },
                {
                    title: '压测工具',key: 'tools'
                },
                {
                    title: '工具描述',key: 'tools_detail',tooltip: true,ellipsis: true,
                },
                {
                    title: '额外信息',key: 'other',tooltip: true,ellipsis: true,
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',width: 100,align: 'center'
                }
            ],
            // 新增压力测试绑定
            pressure_setting: {
                name: '',
                ptype: '',
                target_detail: "单机/集群   Linux Centos7.4  内核:4.4\n节点1： 192.168.11.81 1c2g 200g hdd\n",
                tools: '',
                tools_detail: '',
                other: '',
            },
            pressure_setting_rules: {
                name:[
                    {required: true,message:"请输入压力测试名称",trigger: 'blur'},
                ],
            },
            show_add_modal: false,
            // 编辑数据
            pressure_setting_edit: {
                id: '',
                name: '',
                ptype: '',
                target_detail: '',
                tools: '',
                tools_detail: '',
                other: '',
            },
            ptype_list:['基准测试','模拟测试'],
            show_edit_modal: false,
            // 编辑数据
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        handleLink(params){
            const { href } = this.$router.resolve({
                path: '/pressureSettingDetail'
            });
            window.open(href+"?id="+params.row.id, '_blank');
        },
        submit_edit_pressure_setting(name){
            console.log(name)
            let pressure_setting = this.pressure_setting_edit
            let data = {'pressure_setting':pressure_setting}
            post(pressure_setting_update,data).then( response => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })
        },
        btn_edit_pressure_setting(index){
            let pressure_setting =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.pressure_setting_edit = pressure_setting
            this.show_edit_modal=true
        },
        btn_add_pressure_setting(){
            this.show_add_modal = true
        },
        submit_add_pressure_setting(name){
            console.log(name)
            let data = {'pressure_setting':this.pressure_setting}
            post(pressure_setting_add,data).then( response => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:",info)
                }
            })

        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(pressure_setting_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>